<template>
  <div class="content">
    <app-bar type="list"></app-bar>
    <!-- 搜索框 -->
    <div class="search">
      <img class="ss" src="../../assets/ss.svg" alt="" />
      <input
        :class="{ del: search }"
        v-model="search"
        type="text"
        placeholder="请输入武将或战法名称"
      />
      <div v-if="search" class="clear" @click="search = ''">
        <img src="../../assets/clear.svg" alt="" />
      </div>
    </div>
    <!-- 列表类型切换 -->
    <div class="type-switch" v-if="!search.trim()">
      <div
        class="item"
        :class="{
          active: $route.name == 'heroes',
        }"
        @click="switchType('heroes')"
      >
        <img
          src="../../assets/heroes.svg"
          onload="SVGInject(this)"
          class="type-icon"
          alt=""
        />武将
      </div>
      <div
        class="item"
        :class="{
          active: $route.name == 'tactics',
        }"
        @click="switchType('tactics')"
      >
        <img
          src="../../assets/tactics.svg"
          onload="SVGInject(this)"
          class="type-icon"
          alt=""
        />战法
      </div>
      <div
        class="item"
        :class="{
          active: $route.name == 'books',
        }"
        @click="switchType('books')"
      >
        <img
          src="../../assets/book.svg"
          onload="SVGInject(this)"
          class="type-icon"
          alt=""
        />兵书
      </div>
    </div>

    <div class="tab-view" v-if="!search.trim()">
      <div
        class="tab-list"
        :class="{ transition: tabTransition }"
        ref="tabList"
      >
        <div class="tab-item heroes">
          <!-- 武将筛选 -->
          <div class="heroes-filter" v-if="type == 'heroes'">
            <div class="sort">
              <filter-down-menu
                @update="filterUpdate"
                v-model="filter.heroes.sort.value"
                :data="filter.heroes.sort.values"
                align="left"
                style="margin-right: 0.06rem"
              >
              </filter-down-menu>
              <div
                class="sort-type"
                :class="{
                  active: filter.heroes.sort.type,
                }"
                @click="setHeroesSortType"
              >
                {{
                  filter.heroes.sort.types[filter.heroes.sort.type] || "排序"
                }}
                <div class="i" :active="filter.heroes.sort.type">
                  <img
                    v-if="filter.heroes.sort.type === 'desc'"
                    src="../../assets/down.png"
                    alt=""
                  />
                  <img
                    v-else-if="filter.heroes.sort.type === 'asc'"
                    src="../../assets/up.png"
                    alt=""
                  />
                  <img v-else src="../../assets/none.png" alt="" />
                </div>
              </div>
              <div class="flex"></div>
              <filter-down-menu
                @update="filterUpdate"
                v-model="filter.heroes.season.value"
                :data="filter.heroes.season.values"
                active
                mode="multi"
                align="right"
                placeholder="赛季"
                style="margin-right: 0.06rem"
              >
              </filter-down-menu>

              <filter-down-box
                @update="filterUpdate"
                v-model="filter.heroes.more"
                active
              >
              </filter-down-box>
            </div>
          </div>

          <!-- 循环武将列表 -->
          <div class="item-list">
            <div class="heroe-list" v-if="type == 'heroes'">
              <heroe-list
                :data="heroesFilter"
                :type="filter.heroes.sort.value"
              ></heroe-list>
            </div>
          </div>

          <vivo-down></vivo-down>
        </div>
        <div class="tab-item tactics">
          <!-- 战法筛选 -->
          <div class="tactics-filter" v-if="type == 'tactics'">
            <div
              class="sort-type"
              :class="{
                active: filter.tactics.sort.value,
              }"
              @click="setTacticsSortType"
            >
              发动率
              <div class="i" :active="filter.tactics.sort.value">
                <img
                  v-if="filter.tactics.sort.value === 'desc'"
                  src="../../assets/down.png"
                  alt=""
                />
                <img
                  v-else-if="filter.tactics.sort.value === 'asc'"
                  src="../../assets/up.png"
                  alt=""
                />
                <img v-else src="../../assets/none.png" alt="" />
              </div>
            </div>
            <div class="flex"></div>

            <filter-down-box
              @update="filterUpdate"
              v-model="filter.tactics.more"
              active
            >
            </filter-down-box>
          </div>
          <div class="item-list">
            <!-- 循环战法列表 -->
            <div class="tactic-list" v-if="type == 'tactics'">
              <tactic-item
                :tactic="tactic"
                :search="search"
                v-for="(tactic, i) in tacticsFilter"
                :key="'tactic' + i"
              ></tactic-item>
            </div>
          </div>
          <vivo-down></vivo-down>
        </div>
        <div class="tab-item books">
          <!-- 兵书筛选 -->
          <div class="books-filter" v-if="type == 'books'">
            <div
              class="type-item"
              :class="{ active: filter.books.type.value === type.value }"
              v-for="(type, i) in filter.books.type.list"
              @click="selectBooksType(type.value)"
              :key="i"
            >
              {{ type.title }}
            </div>
          </div>

          <!-- 列表 -->
          <div class="item-list">
            <!-- 循环兵书列表 -->
            <div class="book-list" v-if="type == 'books'">
              <book-item
                :book="book"
                :search="search"
                v-for="(book, i) in booksFilter"
                :key="'book' + i"
              ></book-item>
            </div>
          </div>
          <vivo-down></vivo-down>
        </div>
      </div>
    </div>

    <!-- 列表 -->
    <div class="item-list" v-if="search.trim()">
      <heroe-item
        :heroe="heroe"
        :search="search"
        :type="filter.heroes.sort.value"
        v-for="(heroe, i) in heroesFilter"
        :key="'heroes' + i"
      ></heroe-item>

      <!-- 循环战法列表 -->
      <tactic-item
        :tactic="tactic"
        :search="search"
        v-for="(tactic, i) in tacticsFilter"
        :key="'tactic' + i"
      ></tactic-item>

      <!-- 循环兵书列表 -->
      <book-item
        :book="book"
        :search="search"
        v-for="(book, i) in booksFilter"
        :key="'book' + i"
      ></book-item>

      <vivo-down></vivo-down>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Heroe from "@/object/Heroe";
import localStore from "@/libs/util.store";
import HeroeItem from "@/components/HeroeItem/HeroeItem.vue";
import TacticItem from "@/components/TacticItem/TacticItem.vue";
import BookItem from "@/components/BookItem/BookItem.vue";
import HeroeList from "@/pages/home/HeroeList.vue";
export default {
  name: "Home",
  components: {
    HeroeItem,
    TacticItem,
    BookItem,
    HeroeList,
  },
  data() {
    return {
      search: "",
      tabTransition: false,
      type: "",
      typeName: ["heroes", "tactics", "books"],
      filter: {
        books: {
          type: {
            value: "",
            list: [
              { title: "作战", value: 1 },
              { title: "虚实", value: 2 },
              { title: "军形", value: 3 },
              { title: "九变", value: 4 },
            ],
          },
        },
        heroes: {
          sort: {
            type: "", // desc asc 排序
            types: { desc: "正序", asc: "倒叙" },
            value: "control",
            values: [
              { title: "统御", value: "control" },
              { title: "统率", value: "command" },
              { title: "武力", value: "force" },
              { title: "政治", value: "statecraft" },
              { title: "智力", value: "intelligence" },
              { title: "魅力", value: "charm" },
              { title: "速度", value: "speed" },
            ],
          },
          season: {
            value: null,
            values: [
              { title: "S1", value: 1 },
              { title: "S2", value: 2 },
              { title: "S3", value: 3 },
              { title: "S4", value: 4 },
              { title: "S5", value: 5 },
              // { title: "S6", value: 6 },
              { title: "PK赛季", value: 99 },
            ],
          }, // 赛季
          more: [
            {
              title: "是否招募",
              mode: "single",
              value: null,
              data: [
                { title: "未招募", value: 1 },
                { title: "已招募", value: 2 },
              ],
            },
            {
              title: "阵营",
              mode: "multi",
              value: null,
              data: [
                { title: "魏", value: 1 },
                { title: "蜀", value: 2 },
                { title: "吴", value: 3 },
                { title: "群", value: 4 },
              ],
            },
            {
              title: "武将品质",
              mode: "multi",
              value: null,
              data: [
                { title: "名将（S）", value: 4 },
                { title: "良将（A）", value: 3 },
                { title: "裨将（B）", value: 2 },
                { title: "偏将（C）", value: 1 },
              ],
            },
            {
              title: "兵种适性（A以上）",
              mode: "multi",
              value: null,
              data: [
                { title: "骑兵", value: "cavalry" },
                { title: "盾兵", value: "mauler" },
                { title: "弓兵", value: "archer" },
                { title: "枪兵", value: "pikeman" },
                { title: "器械", value: "weapon" },
              ],
            },
          ],
        },
        tactics: {
          sort: {
            value: "",
          },
          more: [
            {
              title: "是否演练",
              mode: "single",
              value: null,
              data: [
                { title: "未演练", value: 1 },
                { title: "已演练", value: 2 },
              ],
            },
            {
              title: "战法品质",
              mode: "multi",
              value: null,
              data: [
                { title: "S", value: 4 },
                { title: "A", value: 3 },
                { title: "B", value: 2 },
                { title: "C", value: 1 },
              ],
            },
            {
              title: "战法类型",
              mode: "multi",
              value: null,
              data: [
                { title: "指挥", value: 1 },
                { title: "主动", value: 2 },
                { title: "突击", value: 3 },
                { title: "被动", value: 4 },
                { title: "兵种", value: 5 },
                { title: "阵法", value: 6 },
                { title: "内政", value: 7 },
              ],
            },
            {
              title: "战法效果",
              mode: "multi",
              value: null,
              data: [
                { title: "治疗", value: 1 },
                { title: "增益", value: 2 },
                { title: "援护", value: 3 },
                { title: "内政", value: 4 },
                { title: "控制", value: 9 },
                { title: "兵刃单体", value: 5 },
                { title: "兵刃群体", value: 6 },
                { title: "谋略单体", value: 7 },
                { title: "谋略群体", value: 8 },
                { title: "减益", value: 10 },
              ],
            },
            {
              title: "战法来源",
              mode: "multi",
              value: null,
              data: [
                { title: "武将自带", value: 1 },
                { title: "武将传承", value: 2 },
                { title: "事件兑换", value: 3 },
              ],
            },
          ],
        },
      },
    };
  },
  computed: {
    ...mapState("data", [
      "heroesList",
      "tacticsList",
      "booksList",
      "alldataLoading",
    ]),
    heroesFilter() {
      if (this.search.trim()) {
        return this.heroesList;
      } else {
        let list = this.heroesList.map((item) => {
          let obj = JSON.parse(JSON.stringify(item));
          return new Heroe(obj);
        });

        // 是否招募
        let enlist = this.filter.heroes.more[0].value;
        if (enlist) {
          list = list.filter((item) => {
            if (enlist === 1) return !item.isEnlist;
            else return item.isEnlist;
          });
        }

        // 国家筛选
        let country = this.filter.heroes.more[1].value || [];
        country = country.filter((item) => item);
        if (country && country.length) {
          list = list.filter((item) => {
            return country.indexOf(item.country) !== -1;
          });
        }

        // 武将品质
        let quality = this.filter.heroes.more[2].value || [];
        quality = quality.filter((item) => item);
        if (quality && quality.length) {
          list = list.filter((item) => {
            return quality.indexOf(item.quality) !== -1;
          });
        }

        // 兵种适性
        let fit = this.filter.heroes.more[3].value || [];
        fit = fit.filter((item) => item);
        if (fit && fit.length) {
          list = list.filter((item) => {
            let isOk = false;
            fit.some((name) => {
              if (item[name] >= 3) isOk = true;
              else isOk = false;
              return !isOk;
            });
            return isOk;
          });
        }

        // 赛季
        let season = this.filter.heroes.season.value || [];
        season = season.filter((item) => item);
        if (season && season.length) {
          list = list.filter((item) => {
            return season.indexOf(item.season) !== -1;
          });
        }

        // 排序
        let sortType = this.filter.heroes.sort.type;
        let sortVal = this.filter.heroes.sort.value;
        if (sortVal && sortType) {
          list = list.sort((a, b) => {
            if (sortType === "desc") return b[sortVal] - a[sortVal];
            else return a[sortVal] - b[sortVal];
          });
        }

        return list;
      }
    },
    tacticsFilter() {
      if (this.search.trim()) {
        return this.tacticsList;
      } else {
        let list = this.tacticsList;

        // 是否演练
        let practice = this.filter.tactics.more[0].value;
        if (practice) {
          list = list.filter((item) => {
            if (practice === 1) return !item.isPractice;
            else return item.isPractice;
          });
        }

        // 战法品质
        let quality = this.filter.tactics.more[1].value || [];
        quality = quality.filter((item) => item);
        if (quality && quality.length) {
          list = list.filter((item) => {
            return quality.indexOf(item.quality) !== -1;
          });
        }

        // 战法类型
        let type = this.filter.tactics.more[2].value || [];
        type = type.filter((item) => item);
        if (type && type.length) {
          list = list.filter((item) => {
            return type.indexOf(item.type) !== -1;
          });
        }

        // 战法效果
        let effect = this.filter.tactics.more[3].value || [];
        effect = effect.filter((item) => item);
        if (effect && effect.length) {
          list = list.filter((item) => {
            return effect.indexOf(item.effect_type) !== -1;
          });
        }

        // 战法战法类型
        let from = this.filter.tactics.more[4].value || [];
        from = from.filter((item) => item);
        if (from && from.length) {
          list = list.filter((item) => {
            // return from.indexOf(item.fromType) !== -1;
            return item.isFrom(from);
          });
        }

        // 排序
        let sort = this.filter.tactics.sort.value;
        if (sort) {
          list = list.sort((a, b) => {
            if (sort === "desc") return b.probability - a.probability;
            else return a.probability - b.probability;
          });
        }

        return list;
      }
    },
    booksFilter() {
      if (this.search.trim()) {
        return this.booksList;
      } else {
        let list = this.booksList;

        // 类型
        let type = this.filter.books.type.value;
        if (type) {
          list = list.filter((item) => {
            return item.type == type;
          });
        }

        return list;
      }
    },
  },
  created() {
    this.sendUv();
    this.type = this.$route.name;
    let filterVal = localStore.getItem("filter");
    if (filterVal) this.filter = filterVal;
  },
  activated() {
    window.shareData = null;
    window.injectedAll.shareInit("list");
    let scroll = localStore.getItem("list_scroll") || { v: 0 };
    this.$nextTick(() => {
      this.tabTransition = true;
      setTimeout(() => {
        this.scroll.scrollTo({ y: scroll.v * 100 + "%" }, 0);
      }, 100);
    });
  },
  deactivated() {
    localStore.setItem("list_scroll", this.scroll.getScrollProcess());
    this.tabTransition = false;
  },
  watch: {
    heroesList() {},
    "$route.name"() {
      let homeName = ["heroes", "tactics", "books"];
      if (homeName.indexOf(this.$route.name) !== -1) {
        this.sendUv();
      }

      let index = this.typeName.indexOf(this.$route.name);
      if (index === -1) return;
      this.type = this.$route.name;
      this.setTypeLeft();
    },
    search() {
      if (!this.search.trim()) {
        this.$nextTick(() => {
          this.tabTransition = false;
          this.setTypeLeft();
          setTimeout(() => {
            this.tabTransition = true;
          }, 0);
        });
      }
    },
  },
  mounted() {
    this.setTypeLeft();
    this.tabTransition = true;
    this.$nextTick(() => {
      this.tabTransition = true;
      let scroll = localStore.getItem("list_scroll");
      scroll && this.scroll.scrollTo({ y: scroll.v * 100 + "%" }, 0);
    });
  },
  beforeUpdate() {},
  methods: {
    sendUv() {
      window.injectedAll.sendUv("三国志.战略版图鉴");
    },
    getList() {},
    setTypeLeft() {
      let index = this.typeName.indexOf(this.type);
      let w = this.$refs.tabList.parentNode.clientWidth;
      this.$refs.tabList.style.left = 0 - index * w + "px";
    },
    switchType(type) {
      if (this.$route.name == type) return;
      this.$router.replace("/" + type);
    },
    setHeroesSort(val) {
      this.$set(this.filter.heroes.sort, "value", val);
      this.$set(this.filter.heroes.sort, "open", false);
      this.filterUpdate();
    },
    setTacticsSortType() {
      let type = this.filter.tactics.sort.value;
      if (type == "desc") {
        this.$set(this.filter.tactics.sort, "value", "asc"); // 降序
      } else {
        this.$set(this.filter.tactics.sort, "value", "desc"); // 降序
      }
      this.filterUpdate();
    },
    filterUpdate() {
      localStore.setItem("filter", this.filter);
    },
    setHeroesSortType() {
      let type = this.filter.heroes.sort.type;
      if (type == "desc") {
        this.$set(this.filter.heroes.sort, "type", "asc"); // 降序
      } else {
        this.$set(this.filter.heroes.sort, "type", "desc"); // 降序
      }
      this.filterUpdate();
    },
    selectBooksType(value) {
      if (this.filter.books.type.value === value) {
        this.$set(this.filter.books.type, "value", null);
      } else {
        this.$set(this.filter.books.type, "value", value);
      }
      this.filterUpdate();
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  // height: 100%;
  background: #ffffff;
  flex-direction: column;
  padding-top: 0.46rem;
  .tab-view {
    width: 100%;
    position: relative;
    .tab-list {
      position: absolute;
      left: 0;
      white-space: nowrap;
      &.transition {
        transition: left 0.3s;
      }
      * {
        white-space: pre-wrap;
      }
      .tab-item {
        width: 100vw;
        max-width: 500px;
        display: inline-block;
      }
    }
  }
  .search {
    margin: 0.04rem 0.15rem 0;
    height: 0.36rem;
    border-radius: 4px;
    border: 1px solid #ebebeb;
    position: relative;
    .ss {
      position: absolute;
      font-size: 0.17rem;
      top: 0.06rem;
      left: 0.06rem;
      width: 0.24rem;
      height: 0.24rem;
    }
    .clear {
      position: absolute;
      font-size: 0.14rem;
      top: 0;
      right: 0;
      left: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 0.36rem;
      height: 0.36rem;
      img {
        width: 0.22rem;
        height: 0.22rem;
      }
    }
    input {
      width: 100%;
      height: 100%;
      padding: 0 0.1rem 0 0.38rem;
      font-size: 0.12rem;
      box-sizing: border-box;
      font-weight: 400;
      border: none;
      &.del {
        padding: 0 0.35rem 0 0.38rem;
      }
      &::placeholder {
        color: #b3b3b3;
      }
    }
  }
  .type-switch {
    box-sizing: border-box;
    padding: 2px;
    margin: 0.1rem 0.15rem 0;
    background: #f2f2f2;
    border-radius: 4px;
    font-size: 0px;
    display: flex;
    align-items: center;
    .item {
      flex: 1;
      width: 0;
      height: 0.28rem;
      border-radius: 3px;
      font-size: 0.12rem;
      text-align: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      .type-icon {
        height: 0.12rem;
        margin-right: 0.04rem;
        ::v-deep {
          path {
            fill: #b2b2b2;
          }
        }
      }
      &.active {
        background: #ffffff;
        color: #ff8a69;
        .type-icon {
          ::v-deep {
            path {
              fill: #ff8a69;
            }
          }
        }
      }
    }
  }
  .page-type {
    ::v-deep {
      .van-tabs__wrap {
        display: none;
      }
    }
  }
  .heroes-filter {
    margin: 0.1rem 0.15rem 0;
    .sort {
      display: flex;
      .sort-type {
        width: 0.6rem;
        height: 0.3rem;
        border-radius: 4px;
        font-size: 0.12rem;
        text-align: center;
        background: #f2f2f2;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        &.active {
          background: #ffffff;
          border: 1px solid #ff8a69;
          color: #ff8a69;
        }
        .i {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-left: 0.02rem;
          img {
            width: 0.1rem;
          }
        }
      }
    }
    .flex {
      flex: 1;
    }
  }
  .tactics-filter {
    margin: 0.1rem 0.15rem 0;
    display: flex;
    align-items: center;
    .flex {
      flex: 1;
    }
    .sort-type {
      width: 0.66rem;
      height: 0.3rem;
      border-radius: 4px;
      font-size: 0.12rem;
      text-align: center;
      background: #f2f2f2;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      &.active {
        background: #ffffff;
        border: 1px solid #ff8a69;
        color: #ff8a69;
      }
      .i {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 0.02rem;
        img {
          width: 0.1rem;
        }
      }
    }
  }
  .books-filter {
    margin: 0.1rem 0.15rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .type-item {
      width: 0.75rem;
      height: 0.28rem;
      border-radius: 4px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f2f2f2;
      font-size: 0.12rem;
      &.active {
        background: #fff;
        color: #ff8a69;
        border: 1px solid #ff8a69;
      }
    }
  }
  .item-list {
    padding: 0 0.15rem;
    margin: 0.12rem 0 0;
  }
}
</style>
